(function () {
  // 引入echarts库

  // 准备尺寸合适的盒模型

  // 基于准备的DOM 初始化
  const myChart = echarts.init(document.querySelector(".nn2"));
  // 指定图表&配置&数据
  var data = [
    {
      name: "黑龙江省",
      百分比: 68,
    },
    {
      name: "辽宁省",
      百分比: 23,
    },
    {
      name: "吉林省",
      百分比: 56,
    },
    {
      name: "北京市",
      百分比: 89,
    },
    {
      name: "上海市",
      百分比: "65",
    },
  ];
  var bgColor = [
    "#1089E7",
    "#F57474",
    "#56D0E3",
    "#F8B448",
    "#8B78F6",
    "#FF7F50",
  ];

  var dataSource = data;
  var dataName = [];
  var dataValue = [];
  var dataNum = [];
  for (var key in dataSource) {
    dataName.push(dataSource[key]["name"]);
    dataValue.push(dataSource[key]["百分比"]);
    dataNum.push(100);
  }
  var myColor = bgColor;

  option = {
    // backgroundColor: "#031136",
    title: {
      top: "2%",
      left: "center",
      text: "民用月隐患统计",
      textStyle: {
        align: "center",
        color: "#4DCEF8",
        fontSize: 14,
      },
    },
    //图标位置
    grid: {
      top: "20%",
      left: "35%",
      bottom: "20%",
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        show: true,
        data: dataName,
        inverse: true,
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
        },
      },
      {
        type: "category",
        show: false,
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        data: dataValue,
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
          //formatter: function (value) {
          //    return value + '%';
          //}
        },
      },
    ],
    series: [
      {
        name: "地区",
        type: "bar",
        yAxisIndex: 0,
        data: dataValue,
        zlevel: 1,
        barWidth: 10,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                //color: 'rgb(57,89,255,1)'
                color: "#385FFC",
              },
              {
                offset: 1,
                //color: 'rgb(46,200,207,1)'
                color: "#2FBED3",
              },
            ]),
          },
        },
      },
      {
        name: "背景",
        type: "bar",
        yAxisIndex: 1,
        barGap: "-100%",
        data: dataNum,
        barWidth: 10,
        itemStyle: {
          normal: {
            color: "rgba(24,31,68,1)",
            barBorderRadius: 30,
          },
        },
      },
    ],
  };
  // 渲染
  myChart.setOption(option);

  window.myChart1 = myChart;
})();
